<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
<!--管理员：成绩分布图交互界面-->
<div class="easyui-tabs" style="width:100%;height:100%">
    <div title="班级总分成绩分布" style="padding:10px">
            <table>
                <tr>
                    <td style="width: 120px;">
                        <select id="totaldivide_gradeName" class="easyui-combobox" name="gradeName" label="选择年级:" labelPosition="top" style="width:100%;">
                            <option th:each="gra:${session.grades}" th:value="${gra.getGradeName()}" th:text="${gra.getGradeName()}"></option>
                        </select>
                    </td>
                    <td style="width: 10px;"></td>
                    <td style="width: 120px;">
                        <select id="totaldivide_semesterName" class="easyui-combobox" name="semesterName" label="选择学期:" labelPosition="top" style="width:100%;">
                            <option th:each="semes:${session.semesters}" th:value="${semes.getSemesterName()}" th:text="${semes.getSemesterName()}"></option>
                        </select>
                    </td>
                    <td style="width: 10px;"></td>
                    <td style="width: 300px;">
                        <select id="totaldivide_examName" class="easyui-combobox" name="examName" label="选择考试:" labelPosition="top" style="width:100%;">
                            <option th:each="exa:${session.exams}" th:value="${exa.getExamName()}" th:text="${exa.getExamName()}"></option>
                        </select>
                    </td>
                    <td style="width: 10px;"></td>
                    <td style="width: 120px;">
                        <select id="totaldivide_categoryName" class="easyui-combobox" name="categoryName" label="选择分类:" labelPosition="top" style="width:100%;">
                            <option th:each="cate:${session.categorys}" th:value="${cate.getCategoryName()}" th:text="${cate.getCategoryName()}"></option>
                        </select>
                    </td>
                    <td style="width: 300px;">
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" style="margin: 30px 0 0 30px;" onclick="doTotalDivideChartData()">查询</a>
                    </td>
                </tr>
            </table>
        <div id="charttotaldivide" style="width: 1200px;height:600px;"></div>
    </div>
    <div title="班级学科成绩分布" style="padding:10px">
            <table>
                <tr>
                    <td style="width: 120px;">
                        <select id="coursedivide_gradeName" class="easyui-combobox" name="gradeName" label="选择年级:" labelPosition="top" style="width:100%;">
                            <option th:each="gra:${session.grades}" th:value="${gra.getGradeName()}" th:text="${gra.getGradeName()}"></option>
                        </select>
                    </td>
                    <td style="width: 10px;"></td>
                    <td style="width: 120px;">
                        <select id="coursedivide_semesterName" class="easyui-combobox" name="semesterName" label="选择学期:" labelPosition="top" style="width:100%;">
                            <option th:each="semes:${session.semesters}" th:value="${semes.getSemesterName()}" th:text="${semes.getSemesterName()}"></option>
                        </select>
                    </td>
                    <td style="width: 10px;"></td>
                    <td style="width: 300px;">
                        <select id="coursedivide_examName" class="easyui-combobox" name="examName" label="选择考试:" labelPosition="top" style="width:100%;">
                            <option th:each="exa:${session.exams}" th:value="${exa.getExamName()}" th:text="${exa.getExamName()}"></option>
                        </select>
                    </td>
                    <td style="width: 10px;"></td>
                    <td style="width: 120px;">
                        <select id="coursedivide_categoryName" class="easyui-combobox" name="categoryName" label="选择分类:" labelPosition="top" style="width:100%;">
                            <option th:each="cate:${session.categorys}" th:value="${cate.getCategoryName()}" th:text="${cate.getCategoryName()}"></option>
                        </select>
                    </td>
                    <td style="width: 10px;"></td>
                    <td style="width: 60px;">
                        <select id="coursedivide_courseEnName" class="easyui-combobox" name="courseEnName" label="选择学科:" labelPosition="top" style="width:100%;">
                            <option th:each="course:${session.courses}" th:value="${course.getCourseEnName()}" th:text="${course.getCourseChName()}"></option>
                        </select>
                    </td>
                    <td style="width: 300px;">
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" style="margin: 30px 0 0 30px;" onclick="doCourseDivideChartData()">查询</a>
                    </td>
                </tr>
            </table>
        <div id="chartcoursedivide" style="width: 1200px;height:600px;"></div>
    </div>
</div>
<script type="text/javascript" th:inline="none">
    /**
     * Author@zlc
     * 功能：总分分布图表。异步获取数据，设置图表。
     * */
    function doTotalDivideChartData(){
        let gradeName=$("#totaldivide_gradeName").val();
        let semesterName=$("#totaldivide_semesterName").val();
        let examName=$("#totaldivide_examName").val();
        let categoryName=$("#totaldivide_categoryName").val();
        let dom=document.getElementById('charttotaldivide');
        let myChart = echarts.init(dom);
        $.ajax({
            type: "post",
            url: "getTotalDivideChartData",
            data: {
                "gradeName":gradeName,
                "semesterName":semesterName,
                "examName":examName,
                "categoryName":categoryName},
            dataType:'json',
            async:true,
            success: function(res) {
                // console.log(res) // 数据返回成功
                if (res.forLegendData.length==0){$.messager.alert("消息提醒",
                    '没有查询到统计数据。请管理员先在“数据维护->管理统计报表"中添加“班级总分一分段表”',"info");}
                else {
                // 指定图表的配置项和数据
                let thisOption = EchartsSettings();
                // 图表的标题
                thisOption.title.text=gradeName+semesterName+examName+'总分分布'
                // legend：
                thisOption.legend.top=60; //距离顶部60px
                thisOption.legend.left='right';//右对齐
                thisOption.legend.orient='vertical';//纵向布局
                thisOption.legend.data=res.forLegendData; //显示的数据
                // x轴
                thisOption.xAxis.type='value';//重置为数值
                thisOption.xAxis.name='总分';
                // y轴
                thisOption.yAxis.name='百分比';
                thisOption.graphic[0].children[0].style.text="备注：本次考试总分有效分平均分成m段，统计每班在每个分数段的人数占本班总人数的百分比。";
                // 根据legend.data，重新组织series[]
                for (let i=0;i<res.forLegendData.length;i++){
                    let tObject={
                        name:res.forLegendData[i],
                        type:'line',
                        smooth: true,
                        symbol: 'none',
                        tooltip: {
                            formatter: '{a}<br />总分,占比<br />{c}'
                        },
                        data: res.forSeriesData[res.forLegendData[i]]
                    }
                    thisOption.series.push(tObject)
                }
                myChart.setOption(thisOption); //加载thisOption
                }
            }
        })
    }
    /**
     * Author@zlc
     * 功能：学科成绩分布图表。异步获取数据，设置图表。
     * */
    function doCourseDivideChartData(){
        let gradeName=$("#coursedivide_gradeName").val();
        let semesterName=$("#coursedivide_semesterName").val();
        let examName=$("#coursedivide_examName").val();
        let categoryName=$("#coursedivide_categoryName").val();
        let courseEnName=$("#coursedivide_courseEnName").val();
        let courseChName=$("#coursedivide_courseEnName").find("option:selected").text();;
        let dom=document.getElementById('chartcoursedivide');
        let myChart = echarts.init(dom);
        $.ajax({
            type: "post",
            url: "getCourseDivideChartData",
            data: {
                "gradeName":gradeName,
                "semesterName":semesterName,
                "examName":examName,
                "categoryName":categoryName,
                "courseEnName":courseEnName},
            dataType:'json',
            async:true,
            success: function(res) {
                // console.log(res) // 数据返回成功
                if (res.forLegendData.length==0){$.messager.alert("消息提醒",
                    '没有查询到统计数据。请管理员先在“数据维护->管理统计报表"中添加“班级学科一分段表”',"info");}
                else {
                    // 指定图表的配置项和数据
                    let thisOption = EchartsSettings();
                    // 图表的标题
                    thisOption.title.text=gradeName+semesterName+examName+courseChName+'成绩分布'
                    // legend：
                    thisOption.legend.top=60; //距离顶部60px
                    thisOption.legend.left='right';//右对齐
                    thisOption.legend.orient='vertical';//纵向布局
                    thisOption.legend.data=res.forLegendData; //显示的数据
                    // x轴
                    thisOption.xAxis.type='value';//重置为数值
                    thisOption.xAxis.name='总分';
                    // y轴
                    thisOption.yAxis.name='百分比';
                    thisOption.graphic[0].children[0].style.text="备注：本次考试当前学科有效分平均分成m段，统计每班在每个分数段的人数占本班总人数的百分比。";
                    // 根据legend.data，重新组织series[]
                    for (let i=0;i<res.forLegendData.length;i++){
                        let tObject={
                            name:res.forLegendData[i],
                            type:'line',
                            smooth: true,
                            symbol: 'none',
                            tooltip: {
                                formatter: '{a}<br />总分,占比<br />{c}'
                            },
                            data: res.forSeriesData[res.forLegendData[i]]
                        }
                        thisOption.series.push(tObject)
                    }
                    myChart.setOption(thisOption); //加载thisOption
                }
            }
        })
    }
</script>
</body>
</html>